<template>
  <div class="staff">
    <el-row class="table-grid-content">
      <el-col :span="18" class="grid">
        <el-input v-model="input" placeholder="员工信息列表"></el-input>
      </el-col>
      <el-col :span="3" class="grid" :gutter="1">
        <el-button type="success" icon="el-icon-search">检索员工</el-button>
      </el-col>
      <el-col :span="2" class="grid" :gutter="15">
        <el-button type="primary" @click="addMembers()">增加员工信息</el-button>
      </el-col>
    </el-row>

    <el-table :data="tables" :stripe="true" :border="true" width="100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="工号" prop="id"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="职位" prop="workgroup"></el-table-column>
      <el-table-column label="薪水" prop="salary"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="modifyData(scope.$index, scope.row)">修改信息</el-button>
          <el-button type="danger" @click="deleteData(scope.$index,tableData)">删除员工信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="centerDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="工号" :picker-options="pickerOptions">
          <el-date-picker v-model="editForm.id"></el-date-picker>
        </el-form-item>
        <el-form-item label="年龄" :picker-options="pickerOptions">
          <el-date-picker v-model="editForm.age"></el-date-picker>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="editForm.workgroup></el-input>
        </el-form-item>
				<el-form-item label=" 薪水">
            <el-input v-model="editForm.salary"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isAddMembers">
      <el-form :model="addForm">
        <el-form-item label="姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :picker-options="pickerOptions">
          <el-date-picker v-model="addForm.age"></el-date-picker>
        </el-form-item>
        <el-form-item label="薪水">
          <el-input v-model="addForm.salary"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="addForm.workgroup"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitAddRow()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    musicBroadcastingDetails
  } from '@/api/staff.js'
  import axios from 'axios'
  var _index;
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        centerDialogVisible: false,
        isAddMembers: false,
        editForm: [],
        addForm: [],
        searchData: '',
        input: '',
        id: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        tableData() {
          return {
            list: null
          }
        },
        created() {
          this.fetchData()
        },
        methods: {
          fetchData() {
            var vm = this
            getList().then(res => {
              console.log(res.content)
              vm.list = res.content
            })
          },
          deleteData(index, row) {
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",

                cancelButtonText: "取消",

                type: "warning"
              })

              .then(() => {
                this.$message({
                  type: "success",

                  message: "删除成功!"
                });

                row.splice(index, 1);
                console.log("进行了删除操作")
                console.log("index的值是：" + index)
                console.log("row的值是：", row)
              })

              .catch(() => {
                this.$message({
                  type: "info",

                  message: "已取消删除"
                });
                console.log("已取消删除操作")
              });



          },
          modifyData(index, row) {
            this.centerDialogVisible = true
            this.editForm = Object.assign({}, row); //重置对象
            _index = index;
            console.log("index的值：" + index)
            console.log("_index的值：" + _index)
            console.log("row的值是：", this.editForm) //代表选择的这一行的数据
          },
          sumbitEditRow() {
            var editData = _index;
            console.log("editData的值" + this.editForm)
            this.tableData[editData].name = this.editForm.name;
            this.tableData[editData].date = this.editForm.date;
            this.tableData[editData].address = this.editForm.address;
            this.centerDialogVisible = false;
            console.log("数据：" + this.editForm.date)
            console.log("对象数组", this.tableData)
          },
          closeDialog() {
            this.centerDialogVisible = false
            this.isAddMembers = false
            console.log("editfrom", this.editForm)
            console.log("addfrom", this.addForm)

          },
          addMembers() {
            this.isAddMembers = true
            this.addForm = {
              name: '',
              date: '',
              address: ''
            }
          },
          sumbitAddRow() {
            this.tableData = this.tableData || []
            console.log("表格是:" + this.tableData)
            this.tableData.push({
              name: this.addForm.name,
              date: this.addForm.date,
              address: this.addForm.address
            })
            this.isAddMembers = false;
            console.log("新增的日期：" + this.addForm.date)
          }
        },
        computed: {
          tables() {
            const input = this.input
            if (input) {
              console.log("input输入的搜索内容：" + this.input)
              return this.tableData.filter(data => {
                console.log("object:" + Object.keys(data))
                return Object.keys(data).some(key => {
                  return String(data[key]).toLowerCase().indexOf(input) > -1
                })
              })
            }
            return this.tableData
          }
        }
      }
    },
  }
</script>
